<div class="wrap">
  <div id="icon-index" class="icon32"></div>
  <h2><?php e($pageTitle) ?></h2>

  <div id="report-list" class="fLeft" style="width:700px; margin-left:3px; border:1px solid #ccc;">
    <div class="title"><?php __('Report Table') ?></div>
    <div class="toolbar" style="padding:3px 0 0 3px;">
      <div class="fLeft"><?php __('From'); ?>:
        <select id="fMonth" class="select" style="width:80px;">
        <option value=""><?php __('select'); ?>..</option>
<?php foreach ($months as $i=>$name) {
          $selected = ($fmonth == $i) ? ' selected' : ''; ?>
        <option value="<?php e($i); ?>"<?php e($selected); ?>><?php e($name); ?></option>
<?php } ?>
      </select>
        <select id="fYear" class="select" style="width:60px; margin-right:20px;">
          <option value=""><?php __('select'); ?>..</option>
<?php $y = date('Y');
      for ($x=$y; $x>2006; $x--) {
          $selected = ($fyear == $x) ? ' selected' : ''; ?>
          <option value="<?php e($x); ?>"<?php e($selected); ?>><?php e($x); ?></option>
<?php } ?>
        </select><?php __('To'); ?>:
        <select id="tMonth" class="select" style="width:80px;">
          <option value=""><?php __('select'); ?>..</option>
<?php foreach ($months as $i=>$name) {
          $selected = ($tmonth == $i) ? ' selected' : ''; ?>
        <option value="<?php e($i); ?>"<?php e($selected); ?>><?php e($name); ?></option>
<?php } ?>
        </select>
        <select id="tYear" class="select" style="width:60px;">
          <option value=""><?php __('select'); ?>..</option>
<?php $y = date('Y');
      for ($x=$y; $x>2006; $x--) {
          $selected = ($tyear == $x) ? ' selected' : ''; ?>
          <option value="<?php e($x); ?>"<?php e($selected); ?>><?php e($x); ?></option>
<?php } ?>
        </select>
        <div class="search" onclick="getReport();">&nbsp;</div>
      </div>
      <div id="report-list-status" style="display:none;">loading..</div>
    </div>
    <div id="report-list-body" style="overflow:auto; width:700px; height:337px;">

    </div>
  </div>
  <div class="clear"></div>
</div>

<script>
var _webroot = '<?php e($this->base); ?>';

function getReport () {
    var fmonth = Ext.fly('fMonth').getValue();
    var fyear  = Ext.fly('fYear').getValue();
    var tmonth = Ext.fly('tMonth').getValue();
    var tyear  = Ext.fly('tYear').getValue();

    if (!fmonth || !fyear || !tmonth || !tyear) {
        alert('Please select month and year to generate report.');
        return false;
    }

    var transId = Ext.Ajax.request({
        url: _webroot+'/admin/sales/monthly_report',
        method: 'POST',
        params: 'from='+fyear+'-'+fmonth+'&to='+tyear+'-'+tmonth,
        success: function(response, opts) {
            Ext.fly('report-list-body').update(response.responseText);
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('report-list-status').ghost('b', { useDisplay:true });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.fly('report-list-status').fadeIn().update('Loading..')
    }
} // getReport

function message (msg, focus) {
    alert(msg);

    if (typeof focus != 'undefined') {
        Ext.fly(focus).focus();
    }
} // message
</script>